<template>
	<div class="main-router-view">
		<el-table :data="movieList">
			<el-table-column prop="movieId" label="ID" width="100"></el-table-column>
			<el-table-column prop="movieName" label="电影名"></el-table-column>
			<el-table-column prop="score" label="评分"></el-table-column>
			<el-table-column prop="counts" label="点赞"></el-table-column>
			<el-table-column prop="cover" label="封面">
				<template slot-scope="scope">
					<img :src="$mConfig.formatFileUrl(scope.row.cover)" alt="" style="width: 70px;heihgt:100px;">
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="150">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="linkEdit(scope.row._id)">编辑</el-button>
					<el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: "MovieList",
		components: {},
		data() {
			return {
				movieList: []
			};
		},
		methods: {
			async fetch() {
				const res = await this.http.get("admin/movies/list");
				this.movieList = res.data.list;
			},
			linkEdit(id) {
				this.$router.push(`/movies/edit/${id}`);
			},
			async remove(row) {
				this.$confirm(`是否删除该电影${row.name} ?`, "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(async () => {
						const res = await this.http.post(`admin/movies/list/${row._id}`)
						this.$message({
							type: "success",
							message: "删除成功!"
						});
						this.fetch();
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			}
		},
		created() {
			this.fetch();
		}
	};
</script>

<style scoped>
	

</style>
